
<style type="text/css">
    #reset {
        background: none repeat scroll 0 0 #CCCCCC;
        border-radius: 3px;
        color: #555555;
        font-family: open sans;
        font-size: 10px;
        font-weight: 400;
        margin-left: 150px;
        margin-top: -26px;
        padding: 0 4px;
        position: absolute;
    }
    #style-switcher {
        color: #FFFFFF;
        position: fixed;
        top: 20%;
        z-index: 10000;
    }
    #switcher-head {
        background-color: rgba(0, 0, 0, 0.7);
        color: #FFFFFF;
        cursor: pointer;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        margin: 0;
        padding-left: 20px;
        position: relative;
        width: 270px;
    }
    #switcher-head:before {
        color: #ECECEC;
        content: "";
        font-family: FontAwesome;
        font-size: 28px;
        left: 235px;
        overflow: hidden;
        position: absolute;
        top: 2px;
    }
    #switcher-content {
        background-color: rgba(61, 61, 61, 0.8);
        overflow: hidden;
        padding: 0;
        width: 225px;
    }
    #switcher-content .el {
        border-bottom: 1px solid #232323;
        border-top: 1px solid #414141;
        padding: 5px 10px;
    }
    #switcher-content select {
        height: 24px;
        margin-bottom: 11px;
        outline: medium none;
    }
    #switcher-content .sub-head {
        margin-bottom: 10px;
    }
    #switcher-content ul {
        margin-left: 5px;
        margin-top: 5px;
        overflow: hidden;
    }
    #switcher-content li {
        float: left;
        list-style-type: none;
        margin: 0 8px 6px 0;
    }
    #switcher-content img {
        border-radius: 4px;
        display: block;
    }
    #switcher-content {
        border-bottom-right-radius: 6px;
    }
    #switcher-content form {
        margin: 0;
    }
    .color-default {
        background: none repeat scroll 0 0 #D2D1D0;
    }
    .switcher strong {
        color: inherit;
    }
    .switcher-head span {
        margin-left: 15px;
    }
    .switcher-body {
        padding: 15px;
        position: relative;
    }
    .switcher-trigger {
        background-color: #333333;
        border-radius: 0 4px 4px 0;
        font-size: 24px;
        height: 40px;
        left: auto;
        position: absolute;
        right: -40px;
        text-align: center;
        top: 0;
        width: 40px;
    }
    .switcher ul.switcher-op-selectors {
        margin: 0 -5px -5px 0;
    }
    ul.switcher-op-selectors li a {
        border-radius: 4px;
        float: left;
        height: 30px;
        margin-top: 1px;
        width: 30px;
    }
    .button_switch li a {
        background: none repeat scroll 0 0 #EB7350;
        color: #F1F1F1;
        float: left;
        font-family: open sans;
        font-size: 14px;
        font-weight: 100;
        padding: 6px 16px;
    }
    .button_switch li a.active {
        background: none repeat scroll 0 0 #F1F1F1;
        color: #EB7350;
    }
    .button_switch li a:hover {
        background: none repeat scroll 0 0 #F1F1F1;
        color: #EB7350;
        text-decoration: none;
    }
</style>

<?php
$templateFile = $this->templateFile;
echo $this->partial(
    $templateFile.".php");
?>
<div style="left: -225px;" id="style-switcher">
    <div id="switcher-head">Bảng điều khiển</div>
    <a id="reset" href="#">Reset Style</a>
    <div id="switcher-content">
        <div class="switcher-body">
            <form action="#">
                <div class="switcher-op-colors">
                    <ul id="dark-skin" class="button_switch">
                        <li><a style="padding:7px 13px; background:#fff !important; color:#555 !important;;" data-rel="light-skin" href="javascript:saveTemplateBlock();">Lưu mẫu</a></li>
                    </ul>
                </div>
                <hr>

            </form>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function(){
        $("#switcher-head").toggle(function(){
            $("#style-switcher").animate({
                left: 0
            }, 500);
        }, function(){
            $("#style-switcher").animate({
                left: -225
            }, 500);
        });
    })




</script>